<!--添加用户-->
<!--添加用户-->
<template>
    <div>
      <el-form :rules = "rules" ref="formLabelAlign" :label-position="labelPosition" label-width="80px" :model="formLabelAlign" id = "form">
        <el-form-item label="用户名" prop="UserName">
          <el-input v-model="formLabelAlign.UserName"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名" prop="RealName">
          <el-input v-model="formLabelAlign.RealName"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="tel">
          <el-input v-model="formLabelAlign.tel"></el-input>
        </el-form-item>

        <el-form-item label="电子邮件" prop="email">
          <el-input v-model="formLabelAlign.email"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="UserPwd">
          <el-input v-model="formLabelAlign.UserPwd"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" plain id="button1"  @click="submitForm()">提交</el-button>
      <el-button type="primary" plain id="button2" @click="resetForm('formLabelAlign')">取消</el-button>
    </div>
  </template>
  
  <script>
import axios from 'axios';
  export default {
    data() {
      var checkUserName = (rule,value,callback) => {
        if(!value)
          return callback(new Error('用户名不能为空'));
      }
      var checkRealName = (rule,value,callback) => {
        if(!value)
          return callback(new Error('真实姓名不能为空'));
      }
      var checktel = (rule,value,callback) => {
        if(!value)
          return callback(new Error('电话不能为空'));
        else if(isNaN(value))
          return callback(new Error('请输入合法电话'));

      }
      var checkemail = (rule,value,callback) => {
        if(!value)
          return callback(new Error('邮箱不能为空'));
      }
      var checkUserPwd = (rule,value,callback) => {
        if(!value)
          return callback(new Error('密码不能为空'));
      }
      return {
        labelPosition: 'right',
        formLabelAlign: {
          UserName: '',
          RealName: '',
          tel: '',
          email:'',
          UserPwd:''
        },
        rules: {
            UserName: [
            {validator: checkUserName, trigger: 'blur'}
          ],
          RealName:[
            {validator: checkRealName, trigger: 'blur'}
          ],
          tel: [
            {validator: checktel, trigger: 'blur'}
          ],
          email:[
            {validator: checkemail, trigger: 'blur'}
          ],
          UserPwd:[
            {validator: checkUserPwd, trigger: 'blur'}
          ]
        }
      }
    },
	async created() {
      let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
      const config = {
          headers: {
              // 设置内容类型为JSON
              'Content-Type': 'application/json;charset=UTF-8',
              // 添加token到请求头
              token: user.token || '',
          }
      }
      //this.$request.post('/device',this.formLabelAlign).then(res => {
      const res = await axios.get('http://127.0.0.1:8000/user',config)
      if(res.data.code == '401')
          this.$router.push('/')
  },
    methods:{
      async submitForm(){
          let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
          const config = {
              headers: {
                  // 设置内容类型为JSON
                  'Content-Type': 'application/json;charset=UTF-8',
                  // 添加token到请求头
                  'token': user.token || '',
              }
          }
          //this.$request.post('/user', this.formLabelAlign).then(res => {
       const res = await axios.post('http://127.0.0.1:8000/user',this.formLabelAlign,config)
        console.log(res)
        if( res.data.code == '200')
          this.$router.push('/usersuccess')
        else
          this.$router.push('/usererror')
          //})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }
  </script>
  
  <style>

  #form{
    margin-top: 50px;
    width: 80%;
  }
  #button1{
    position:fixed;
    left:300px;
    top: 500px;
  }

  #button2{
    position:fixed;
    left:700px;
    top: 500px;
  }
  </style>